<template>
    <div v-loading="loading">

        <div class="settingCouponsSearch">
            <el-form :inline="true">
                <el-button type="primary" @click="addCouponsVisible = true">添加</el-button>
                <el-form-item label="优惠券名称" style="margin-left: 100px;">
                    <el-input v-model="name" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>
        </div>

        <div class="settingCouponsTable">
            <el-table :data="list" border style="width: 1281px">
                <el-table-column
                        align="center"
                        prop="name"
                        label="优惠券名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="term_of_validity"
                        label="有效时间"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.term_of_validity+' 小时'}}
                    </template>
                </el-table-column>
                <el-table-column
                        width="180"
                        align="center"
                        prop="quantity"
                        label="数量">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="full_amount"
                        label="优惠条件"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="discount_amount"
                        label="折扣"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="180"
                        align="center"
                        prop="type"
                        label="优惠券类型">
                    <template slot-scope="scope">
                        {{scope.row.type === 0 ? '满减券' : '满折券'}}
                    </template>
                </el-table-column>
                <el-table-column width="200">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleUpdateVisible(scope.row)"
                                size="mini"
                                type="primary"
                                icon="el-icon-edit">修改
                        </el-button>
                        <el-button
                                @click="settingCouponsDelete(scope.row.id)"
                                size="mini"
                                type="danger"
                                icon="el-icon-delete">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--添加优惠券-->
        <el-dialog title="添加优惠券" :visible.sync="addCouponsVisible">
            <el-form ref="addCouponsForm" :model="addData" :rules="couponsRules">
                <el-form-item label="优惠券类型 " :label-width="couponsAddDialogLabelWidth" prop="type">
                    <el-select style="width: 500px" v-model="addData.type" placeholder="请选择">
                        <el-option
                                v-for="item in type"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券名称" :label-width="couponsAddDialogLabelWidth" prop="name">
                    <el-input style="width: 500px" v-model="addData.name" placeholder="请输入优惠券名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="有效期限" :label-width="couponsAddDialogLabelWidth" prop="term_of_validity">
                    <el-input style="width: 500px" v-model="addData.term_of_validity" placeholder="请输入有效期限 单位：小时">
                    </el-input>
                </el-form-item>
                <el-form-item label="优惠券数量" :label-width="couponsAddDialogLabelWidth" prop="quantity">
                    <el-input-number style="width: 500px" v-model="addData.quantity" :min="1" placeholder="请输入优惠券数量">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="优惠条件" :label-width="couponsAddDialogLabelWidth" prop="full_amount">
                    <el-input-number style="width: 500px" v-model="addData.full_amount" :min="1" placeholder="请输入优惠条件">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="折扣" :label-width="couponsAddDialogLabelWidth" prop="discount_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="addData.discount_amount"
                            placeholder="优惠券类型为折扣券时，请输入小数    例：一折填写0.1">
                    </el-input-number>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCouponsVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddCoupons('addCouponsForm')">确 定</el-button>
            </div>
        </el-dialog>


        <!--修改优惠券-->
        <el-dialog title="修改优惠券" :visible.sync="updateCouponsVisible">
            <el-form ref="updateCouponsForm" :model="updateData" :rules="couponsRules">
                <el-form-item label="优惠券类型 " :label-width="couponsAddDialogLabelWidth" prop="type">
                    <el-select style="width: 500px" v-model="updateData.type" placeholder="请选择">
                        <el-option
                                v-for="item in type"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券名称" :label-width="couponsAddDialogLabelWidth" prop="name">
                    <el-input style="width: 500px" v-model="updateData.name" placeholder="请输入优惠券名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="有效期限" :label-width="couponsAddDialogLabelWidth" prop="term_of_validity">
                    <el-input style="width: 500px" v-model="updateData.term_of_validity" placeholder="请输入有效期限 单位：小时">
                    </el-input>
                </el-form-item>
                <el-form-item label="优惠券数量" :label-width="couponsAddDialogLabelWidth" prop="quantity">
                    <el-input-number style="width: 500px" v-model="updateData.quantity" :min="1" placeholder="请输入优惠券数量">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="优惠条件" :label-width="couponsAddDialogLabelWidth" prop="full_amount">
                    <el-input-number style="width: 500px" v-model="updateData.full_amount" :min="1" placeholder="请输入优惠条件">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="折扣" :label-width="couponsAddDialogLabelWidth" prop="discount_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="updateData.discount_amount"
                            placeholder="优惠券类型为折扣券时，请输入小数    例：一折填写0.1">
                    </el-input-number>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateCouponsVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdateCoupons('updateCouponsForm')">确 定</el-button>
            </div>
        </el-dialog>

        <div class="settingCouponsPage">
            <el-pagination
                    v-if="pageVisible"
                    layout="prev, pager, next"
                    :page-size="10"
                    :total="total">
            </el-pagination>
        </div>


    </div>

</template>

<script>
    export default {
        name: 'settingCoupons',
        data() {
            return {
                list: [],
                loading: false,
                total: 0,
                name: '',
                addCouponsVisible: false,
                addData: {},
                couponsAddDialogLabelWidth: '250px',
                couponsRules: {
                    name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur'}],
                    term_of_validity: [{ required: true, message: '请输入有限期限', trigger: 'blur'}],
                    quantity: [{ required: true, message: '请输入优惠券数量', trigger: 'blur'}],
                    full_amount: [{ required: true, message: '请输入优惠价格', trigger: 'blur'}],
                    discount_amount: [{ required: true, message: '请输入折扣金额', trigger: 'blur'}],
                    type: [{ required: true, message: '请选择优惠券类型', trigger: 'blur'}],
                },
                type: [
                    {id: 0, label: '满减券'},
                    {id: 1, label: '折扣券'}
                ],
                updateData: {},
                updateCouponsVisible: false,
                pageVisible: true
            }
        },
        methods: {
            //初始化数据
            defaultData(page, name) {
                this.loading = true;
                this.$http.get('store/coupons/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        page: page,
                        pageSize: 10,
                        store_id: localStorage.getItem('user_store_id'),
                        name: name
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;

                        if (response.data.data.pagination.total < 10){
                            this.pageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            //搜索
            handelSearch() {
                this.defaultData(1, this.name);
            },

            //重置搜索结果
            handleReset() {
                this.name = '';
                this.defaultData()
            },

            //删除优惠券
            settingCouponsDelete(id){
                this.$confirm('是否删除该优惠券?', '删除优惠券', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$http.get('/store/coupons/del', {
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then( response => {
                        if (response.data.status === 'success'){
                            this.$message.success('删除成功');
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                });
            },

            //添加优惠券
            handleAddCoupons(name){
                this.$refs[name].validate((valid) => {
                    if (!valid){
                        return false;
                    }

                    this.addData.token = localStorage.getItem('user_token');
                    this.addData.stores_id = localStorage.getItem('user_store_id');
                    this.loading = true;
                    this.$http.post('/store/coupons/add', this.addData).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('添加成功');
                            this.addData = {};
                            this.defaultData();
                            this.addCouponsVisible = false;
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                })
            },

            //打开修改对话框复制对象
            handleUpdateVisible(value){
                this.updateCouponsVisible = true;
                this.updateData = value;
            },

            //修改优惠券信息
            handleUpdateCoupons(name){
                this.$refs[name].validate((valid) => {
                    if (!valid){
                        return false;
                    }

                    this.updateData.token = localStorage.getItem('user_token');
                    this.loading = true;
                    this.$http.post('/store/coupons/update', this.updateData).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('修改成功');
                            this.defaultData();
                            this.updateCouponsVisible = false;
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                })
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .settingCouponsSearch {
        margin-top: 24px;
        margin-left: 150px;
    }

    .settingCouponsTable {
        margin-left: 150px;
    }

    .settingCouponsPage{
        margin-top: 24px;
        margin-left: 700px;
    }

</style>
